import * as mars2d from 'mars2d';

export let map; // mars2d.Map三维地图对象
export let graphicLayer;

// 事件对象，用于抛出事件给vue
export const eventTarget = new mars2d.BaseClass();

/**
 * 初始化地图业务，生命周期钩子函数（必须）
 * 框架在地图初始化完成后自动调用该函数
 * @param {mars2d.Map} mapInstance 地图对象
 * @returns {void} 无
 */
export function onMounted(mapInstance) {
  map = mapInstance; // 记录首次创建的map

  // 创建矢量数据图层
  graphicLayer = new mars2d.layer.GraphicLayer();
  map.addLayer(graphicLayer);

  // 图层管理的相关处理，
  initLayerManager();
}

/**
 * 释放当前地图业务的生命周期函数
 * @returns {void} 无
 */
export function onUnmounted() {
  map = null;
}

export function startDrawGraphic() {
  graphicLayer.startDraw({
    type: 'marker',
    style: {
      image: '/img/marker/mark1.png',
      width: 32,
      height: 44,
      horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
      verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
    },
  });
}

// 生成演示数据(测试数据量)
export function addRandomGraphicByCount(count) {
  alert(1)
  graphicLayer.clear();

  const bbox = [116.984788, 31.625909, 117.484068, 32.021504];
  const result = mars2d.PolyUtil.getGridPoints(bbox, count, 30);

  for (let j = 0; j < result.points.length; ++j) {
    const latlng = result.points[j];
    const index = j + 1;

    const graphic = new mars2d.graphic.Marker({
      latlng: latlng,
      style: {
        image: '/img/marker/mark1.png',
        width: 32,
        height: 44,
        horizontalOrigin: mars2d.HorizontalOrigin.CENTER,
        verticalOrigin: mars2d.VerticalOrigin.BOTTOM,
      },
      attr: { index: index },
    });
    graphicLayer.addGraphic(graphic);
  }

  return count.length;
}

// 在图层级处理一些事物
function initLayerManager() {
  // 在layer上绑定监听事件
  graphicLayer.on(mars2d.EventType.click, function (event) {
    console.log('监听layer，单击了矢量对象', event);
  });

  // 可在图层绑定右键菜单,对所有加到这个图层的矢量数据都生效
  bindLayerContextMenu();

  eventTarget.fire('defuatData', {
    enabledShowHide: true,
    enabledPopup: true,
    enabledTooltip: false,
    enabledRightMenu: true,
  });
}

// 绑定右键菜单
function bindLayerContextMenu() {
  graphicLayer.bindContextMenu([
    {
      text: '开始编辑对象',
      iconCls: 'fa fa-edit',
      show: function (e) {
        const graphic = e.graphic;
        if (!graphic || !graphic.editing) {
          return false;
        }
        return !graphic.editing.enabled();
      },
      callback: function (e) {
        const graphic = e.graphic;
        graphicLayer.startEditing(graphic);
      },
    },
    {
      text: '停止编辑对象',
      iconCls: 'fa fa-edit',
      show: function (e) {
        const graphic = e.graphic;
        if (!graphic || !graphic.editing) {
          return false;
        }
        return graphic.editing.enabled();
      },
      callback: function () {
        graphicLayer.stopEditing();
      },
    },
    {
      text: '删除对象',
      iconCls: 'fa fa-trash-o',
      show: (event) => {
        const graphic = event.graphic;
        if (!graphic) {
          return false;
        } else {
          return true;
        }
      },
      callback: function (e) {
        const graphic = e.graphic;
        if (!graphic) {
          return;
        }
        graphicLayer.removeGraphic(graphic);
      },
    },
  ]);
}

export function startDrawPolygonGraphic() {
  graphicLayer.startDraw({
    type: 'polygon',
    style: {
      fill: true,
      fillColor: '#000dfc',
      fillOpacity: 0.3,
      outline: true,
      outlineWidth: 2,
      outlineColor: '#254dc4',
      outlineOpacity: 1,
    },
    success: function (graphic) {
      console.log('标绘完成', graphic);
    },
  });
}
